﻿@namespace MudBlazor.Docs.Examples

<MudStack>
    <MudStack Row Class="flex-wrap">
        <MudStack Spacing="16" AlignItems="@AlignItems.Start">
            <MudToggleGroup T="string" Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled" Style="width: 30rem">
                <MudToggleItem Value="@("One")" />
                <MudToggleItem Value="@("Two")" />
                <MudToggleItem Value="@("Three")" />
            </MudToggleGroup>

            <MudToggleGroup T="string" Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled">
                <MudToggleItem Value="@("left")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignLeft" />
                </MudToggleItem>
                <MudToggleItem Value="@("center")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignCenter" />
                </MudToggleItem>
                <MudToggleItem Value="@("right")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignRight" />
                </MudToggleItem>
                <MudToggleItem Value="@("justify")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignJustify" />
                </MudToggleItem>
            </MudToggleGroup>
        </MudStack>

        <MudSpacer />

        <MudToggleGroup T="string" Vertical Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled">
            <MudToggleItem Value="@("left")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignLeft" />
            </MudToggleItem>
            <MudToggleItem Value="@("center")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignCenter" />
            </MudToggleItem>
            <MudToggleItem Value="@("right")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignRight" />
            </MudToggleItem>
            <MudToggleItem Value="@("justify")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignJustify" />
            </MudToggleItem>
        </MudToggleGroup>
    </MudStack>

    <MudStack Row Class="flex-wrap align-center">
        <MudSelect @bind-Value="_size">
            @foreach (var size in Enum.GetValues(typeof(Size)).Cast<Size>())
            {
                <MudSelectItem Value="@size">@size</MudSelectItem>
            }
        </MudSelect>

        <MudSelect @bind-Value="_color">
            @foreach (var color in Enum.GetValues(typeof(Color)).Cast<Color>())
            {
                <MudSelectItem Value="@color">@color</MudSelectItem>
            }
        </MudSelect>

        <MudCheckBox @bind-Value="_rounded" Label="Rounded" />
        <MudCheckBox @bind-Value="_checkMark" Label="CheckMark" />
        <MudCheckBox @bind-Value="_fixedContent" Label="FixedContent" />
        <MudCheckBox @bind-Value="_outlined" Label="Outlined" />
        <MudCheckBox @bind-Value="_delimiters" Label="Delimiters" />
        <MudCheckBox @bind-Value="_disabled" Label="Disabled" />
    </MudStack>
</MudStack>

@code {
    Size _size = Size.Medium;
    Color _color = Color.Primary;
    bool _rounded = false;
    bool _checkMark = false;
    bool _outlined = true;
    bool _delimiters = true;
    bool _fixedContent = false;
    bool _disabled = false;
}